<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML邮件测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .btn {
            background: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .btn:hover {
            background: #45a049;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            border-radius: 3px;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML邮件测试工具</h1>
        <p>此工具用于测试Apollo系统的HTML邮件发送功能</p>
        
        <form id="testForm">
            <div class="form-group">
                <label for="toEmail">收件人邮箱：</label>
                <input type="email" id="toEmail" name="toEmail" required placeholder="请输入测试邮箱地址">
            </div>
            
            <div class="form-group">
                <label for="subject">邮件主题：</label>
                <input type="text" id="subject" name="subject" value="HTML邮件功能测试" placeholder="邮件主题">
            </div>
            
            <div class="form-group">
                <label for="content">邮件内容（HTML格式）：</label>
                <textarea id="content" name="content" rows="10" placeholder="留空将使用默认测试内容"></textarea>
            </div>
            
            <button type="button" class="btn" onclick="sendTestMail(false)">发送无附件测试邮件</button>
            <button type="button" class="btn" onclick="sendTestMail(true)" style="background: #2196F3; margin-left: 10px;">发送带附件测试邮件</button>
        </form>
        
        <div id="result" style="display: none;"></div>
    </div>

    <script src="/back/scripts/jquery-2.1.0.min.js"></script>
    <script>
        function sendTestMail(withAttachment = false) {
            const toEmail = $('#toEmail').val().trim();
            const subject = $('#subject').val().trim();
            const content = $('#content').val().trim();
            
            if (!toEmail) {
                alert('请输入收件人邮箱地址！');
                return;
            }
            
            const btn = $('button');
            btn.prop('disabled', true);
            if (withAttachment) {
                btn.eq(1).text('发送中...');
            } else {
                btn.eq(0).text('发送中...');
            }
            
            const url = withAttachment ? '/api/mail/test/html-with-attachment' : '/api/mail/test/html';
            const testType = withAttachment ? '带附件' : '无附件';
            
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    toEmail: toEmail,
                    subject: subject + (withAttachment ? '(带附件)' : ''),
                    content: content
                },
                success: function(response) {
                    showResult(response.code === 200, (response.message || response.data) + ' [' + testType + ']');
                },
                error: function() {
                    showResult(false, '请求发送失败，请检查网络连接！ [' + testType + ']');
                },
                complete: function() {
                    btn.prop('disabled', false);
                    btn.eq(0).text('发送无附件测试邮件');
                    btn.eq(1).text('发送带附件测试邮件');
                }
            });
        }
        
        function showResult(success, message) {
            const result = $('#result');
            result.removeClass('success error');
            result.addClass(success ? 'success' : 'error');
            result.text(message);
            result.show();
            
            // 3秒后自动隐藏结果
            setTimeout(() => {
                result.fadeOut();
            }, 3000);
        }
        
        // 页面加载时设置默认测试内容
        $(document).ready(function() {
            $('#content').val(`<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
    <div style="background-color: #4CAF50; color: white; padding: 20px; text-align: center;">
        <h1>HTML邮件测试</h1>
    </div>
    
    <div style="padding: 20px; border: 1px solid #ddd;">
        <h2 style="color: #333;">这是一封HTML格式的测试邮件</h2>
        
        <p>如果您能看到以下格式化内容，说明HTML邮件功能正常：</p>
        
        <ul>
            <li><strong>粗体文字</strong></li>
            <li><em>斜体文字</em></li>
            <li><span style="background-color: #ffeb3b; padding: 2px 5px;">高亮文字</span></li>
            <li><a href="https://www.example.com" style="color: #2196F3;">链接文字</a></li>
        </ul>
        
        <table style="border-collapse: collapse; width: 100%; margin: 20px 0;">
            <tr style="background-color: #f2f2f2;">
                <th style="border: 1px solid #ddd; padding: 8px;">功能</th>
                <th style="border: 1px solid #ddd; padding: 8px;">状态</th>
            </tr>
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">HTML标签</td>
                <td style="border: 1px solid #ddd; padding: 8px; color: green;">正常</td>
            </tr>
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">CSS样式</td>
                <td style="border: 1px solid #ddd; padding: 8px; color: green;">正常</td>
            </tr>
        </table>
        
        <p style="color: #666; font-size: 12px;">
            测试时间：${new Date().toLocaleString()}
        </p>
    </div>
    
    <div style="background-color: #f1f1f1; padding: 10px; text-align: center; font-size: 12px;">
        此邮件由Apollo系统HTML邮件测试工具发送
    </div>
</div>`);
        });
    </script>
</body>
</html>